<template>
  <div class="com-head-main">
    <div class="com-head">
      <img class="logo" src="../../static/img/logo.png">
      <div class="head-nav">
        <router-link class="navShow1" :to="{path:'/index'}">首页</router-link>
        <router-link class="navShow nav1" :to="{path:'/income/stupayment'}">收入</router-link>
        <router-link class="navShow nav2" :to="{path:'/expenditure'}">支出</router-link>
        <router-link class="navShow nav3" :to="{path:'/select'}">查询</router-link>
        <a class="dropdown-cont">
          <el-dropdown :hide-on-click="false" @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="iconfont icon-gengduoda"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">修改密码</el-dropdown-item>
              <el-dropdown-item command="b">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </a>
      </div>
    </div>
    <div class="nav-content" v-show="navHide">
      <div class="nav-shadow">
        <img class="nav-down-bg" src="../../static/img/nav-down-bg.jpg" width="400">
        <div class="nav-cont">
          <ul style="margin-left:142px">
            <li class="nav-cont-item tab1">
              <router-link :to="{path:'/income/stupayment', activeClass: 'on'}">报名费</router-link>
              <router-link :to="{path:'/income/simulationfee', activeClass: 'on'}">模拟费</router-link>
              <router-link :to="{path:'/income/contractfee', activeClass: 'on'}">包库费</router-link>
              <router-link :to="{path:'/income/extrafee', activeClass: 'on'}">加时费</router-link>
            </li>
            <li class="nav-cont-item tab2">
              <router-link :to="{path:'/expenditure', activeClass: 'on'}">加油加气</router-link>
              <router-link :to="{path:'/weihuweixiu', activeClass: 'on'}">维护维修</router-link>
              <router-link :to="{path:'/gongzifafang', activeClass: 'on'}">工资发放</router-link>
              <router-link :to="{path:'/feiyongbaoxiao', activeClass: 'on'}">费用报销</router-link>
              <router-link :to="{path:'/cheliangjieche', activeClass: 'on'}">车辆检车</router-link>
              <router-link :to="{path:'/cheliangbaoxian', activeClass: 'on'}">车辆保险</router-link>
              <router-link :to="{path:'/xueyuantuifei', activeClass: 'on'}">学员退费</router-link>
            </li>
            <li class="nav-cont-item tab3">
              <router-link :to="{path:'/select', activeClass: 'on'}">综合查询</router-link>
              <router-link :to="{path:'/yuangongweihu', activeClass: 'on'}">员工维护</router-link>
              <router-link :to="{path:'/yonghuweihu', activeClass: 'on'}" v-if="isPermission">用户维护</router-link>
              <!--<router-link :to="{path:'/jueseweihu', activeClass: 'on'}">角色维护</router-link>-->
              <router-link :to="{path:'/gongzishezhi', activeClass: 'on'}">参数设置</router-link>
              <router-link :to="{path:'/xuecheshengya', activeClass: 'on'}">学车生涯</router-link>
              <router-link :to="{path:'/shujubulu', activeClass: 'on'}">数据补录</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "comHead",
  mounted: function() {
    let that = this;
    // 导航点击样式
    $(".tab1 a").click(function() {
      that.$nextTick(() => {
        $(".navShow").removeClass("on");
        $(".nav1").addClass("on");
      });
    });
    $(".tab2 a").click(function() {
      that.$nextTick(() => {
        $(".navShow").removeClass("on");
        $(".nav2").addClass("on");
      });
    });
    $(".tab3 a").click(function() {
      that.$nextTick(() => {
        $(".navShow").removeClass("on");
        $(".nav3").addClass("on");
      });
    });
    $(".navShow").click(function() {
      $(this)
        .addClass("on")
        .siblings()
        .removeClass("on");
    });
    // 下滑
    $(".dropdown-cont").mouseover(function() {
      that._data.navHide = false;
    });
    $(".navShow").mouseover(function() {
      that._data.navHide = true;
      setTimeout(function() {
        $(".nav-shadow").mouseover(function() {
          that._data.navHide = true;
        });
        $(".nav-shadow").mouseout(function() {
          that._data.navHide = false;
        });
      }, 1000);
    });
  },
  data() {
    return {
      navHide: false
    };
  },
  computed:{
  	isPermission(){
  		let user = session.get("session_user");
    	let flag = false;
    	user.groupList.forEach(e=>{
    		if (e.groupBh === "2") {
    			flag = true;
    		}
    	});
    	return flag;
  	}
  },
  methods: {
  	logout(){
  		this.$http.get('main/index/logout',d=>{
  				session.clear();
  				this.$websocket.close();
        	this.$router.push("/");
  		});
  	},
    handleCommand(command) {
      if (command == "b") {
        this.logout();
      } else {
        // 修改密码
        this.$prompt("请输入新密码", "修改密码提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: "邮箱格式不正确"
        })
          .then(({ value }) => {
            this.$message({
              type: "success",
              message: "你的新密码是: " + value
            });
            this.$http.post("sys/userOnly", {userBh:session.get("session_user").userBh, password:value}, d => {
                if (d.status == "1") {
                  layer.msg("修改成功，请使用新密码重新登录！");
                  this.logout();
                } else {
                  layer.msg(d.msg, { shift: 6 });
                }
              }
            );
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入"
            });
          });
      }
    },
  }
};
</script>

<style scoped>
.nav-cont-item a:hover {
  color: #ff461f;
}
.nav-cont-item a.on {
  color: #ff461f;
}
.nav-cont-item a {
  width: 100%;
  margin: 12px 0;
  float: left;
  text-align: center;
}
.nav-cont-item {
  width: 92px;
  margin: 0 26px;
  float: left;
}
.nav-shadow {
  width: 80%;
  height: 260px;
  float: right;
  box-shadow: 1px 1px 5px 1px #d3d3d3;
  background: #fff;
  padding: 30px 0;
}
.nav-down-bg {
  float: left;
  margin-left: 4%;
}
.nav-cont {
  width: 47%;
  float: left;
  position: absolute;
  right: 3%;
}
.nav-content {
  width: 94%;
  padding: 0 3%;
  float: left;
  position: relative;
  z-index: 1;
}
/* .nav-content.hide{
  top: -1000px;
}        */
.com-head {
  width: 94%;
  padding: 20px 3%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 1px 1px 5px 1px #d3d3d3;
  position: relative;
  z-index: 9;
}
.com-head-main {
  width: 100%;
  min-width: 1360px;
  position: fixed;
  z-index: 9;
}
.logo {
  width: 466px;
}
.head-nav {
  width: 55%;
}
.head-nav a {
  width: 122px;
  height: 50px;
  line-height: 50px;
  margin: 0 20px;
  font-size: 18px;
  color: #606060;
  text-align: center;
  float: left;
  cursor: pointer;
  border-radius: 30px;
}
.head-nav a.on {
  background: url("../../static/img/nav-bg.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
}
.head-nav a:hover {
  background: url("../../static/img/nav-bg.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
}
.head-nav a:last-child {
  width: 30px;
  height: 50px;
  margin-right: 0;
  padding: 6px 0;
  float: right;
}
.icon-gengduoda {
  font-size: 28px;
}
@media screen and (max-width: 1400px) {
  .logo {
    width: 320px;
  }
}
</style>


